<template>
  <div>
    <h1>欢迎登录{{ VITE_PROJECT_NAME }}，{{ userinfo?.name || '未知' }}</h1>
    <div>
      <a-input v-model:value="value" placeholder="Basic usage" />
      <a-button type="primary">新增</a-button>
      <a-dropdown>
        <span @click.prevent>Hover me</span>
        <template #overlay>
          <a-menu @click="handleMenuClick">
            <a-menu-item key="1">
              前端路由
            </a-menu-item>
            <a-menu-item key="2">
              用户信息
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3">
              退出
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>
  </div>
</template>

<script setup>
import pinia from '~/N/store';
import { useAppStore } from '~/N/store/modules';
import { storeToRefs } from 'pinia';
const store = useAppStore(pinia);

let value = '';

const { userinfo } = storeToRefs(store);
const { VITE_PROJECT_NAME } = process.env;

function handleMenuClick({ key }) {
  console.log(key);
}

</script>

<style lang="scss" scoped></style>